<template>
    <div style="background-color: #f4f4f4">
        <el-scrollbar >
            <div class="img-div">
                <div>
                    <img src="../../assets/img/logo_purple.png" class="logo-img">
                    <img src="../../assets/img/流程.png" class="process-img">
                </div>
            </div>
            <div class="form-div">
                <el-form :rules="rules" ref="form" :model="form" label-width="80px">
                    <el-form-item label="" prop="demands">
                    <span class="form-one" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            *
                        </span>
                        需求标题
                    </span>
                        <div>
                            <el-input v-model="form.demands"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="" prop="categoryName" required>
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            *
                        </span>
                        需求分类
                    </span>
                        <div>
                            <el-select  v-model="form.categoryName"
                                       placeholder="请选择需求分类">
                                <el-option v-for="category in categories" :label="category.categoryName" :value="category.categoryName"></el-option>
                            </el-select>
                        </div>

                    </el-form-item>
                    <el-form-item label="" required>
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            *
                        </span>
                        截止时间
                    </span>
                        <div>
                            <el-col :span="11">
                                <el-date-picker class="form-input" type="datetime" placeholder="选择截止日期"
                                                v-model="form.closingDate" value-format="yyyy-MM-dd HH:mm:ss"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </div>


                    </el-form-item>
                    <el-form-item label="" prop="price">
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            *
                        </span>
                        需求价格
                    </span>
                        <div>
                            <el-col :span="11">
                                <el-input class="form-input" v-model="form.priceLow"></el-input>
                            </el-col>
                            <el-col :span="2">
                        <span class="form-input">
                            &nbsp;&nbsp;——
                        </span>
                            </el-col>
                            <el-col :span="11">
                                <el-input class="form-input" v-model="form.priceHigh"></el-input>
                            </el-col>
                        </div>

                    </el-form-item>
                    <el-form-item>
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            &nbsp;
                        </span>
                        需求风格
                    </span>
                        <div>
                            <el-input class="form-input" v-model="form.style"></el-input>
                        </div>

                    </el-form-item>
                    <el-form-item>
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            &nbsp;
                        </span>
                        需求规格
                    </span>
                        <div>
                            <el-input class="form-input" v-model="form.specifications"></el-input>
                        </div>

                    </el-form-item>
                    <el-form-item>
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            &nbsp;
                        </span>
                        需求格式
                    </span>
                        <div>
                            <el-radio @change="getFormats" style="background: #f4f4f4;" v-model="radio" label=0>视频</el-radio>
                            <el-radio @change="getFormats" style="background: #f4f4f4;" v-model="radio" label=1>图片</el-radio>
                            <el-radio @change="getFormats" style="background: #f4f4f4;" v-model="radio" label=2>音频</el-radio>
                            <el-select v-model="form.format" multiple placeholder="请选择需求作品格式">
                                <el-option
                                        v-for="item in options"
                                        :key="item.demandFormatId"
                                        :label="item.name"
                                        :value="item.name">
                                </el-option>
                            </el-select>

                        </div>
<!--                        <el-input v-model="form.format" placeholder="请选择需求作品格式">-->

<!--                        </el-input>-->
                    </el-form-item>
                    <el-form-item label="" prop="feedbackInterval">
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            *
                        </span>
                        反馈间隔
                    </span>
                        <div>
                            <el-input class="form-input" v-model="form.feedbackInterval"></el-input>
                        </div>

                    </el-form-item>
                    <el-form-item label="" prop="requirements">
                    <span class="form-two" style="font-weight: 700;">
                        <span style="color: #f56c6c;font-size: 14px;">
                            *
                        </span>
                        详细要求
                    </span>
                        <div>
                            <el-input :rows="5" show-word-limit maxlength="200" class="form-input" type="textarea"
                                      v-model="form.requirements"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item class="form-input">
                        <el-button type="primary" @click="onSubmit()">立即发布</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>


            </div>
        </el-scrollbar>
    </div>

</template>

<script>
    import HeaderNav from "../../components/HeaderNav";
    import {addDemands} from "../../assets/api/demandsApi";
    import {selectSecondLevelCategory} from "../../assets/api/categoryApi";
    import moment from 'moment'
    import {selectFormatByType} from "../../assets/api/demandFormatApi";

    export default {
        data() {
            return {
                form: {
                    'demands': '',
                    'username': '',
                    'priceLow': '',
                    'priceHigh': '',
                    'requirements': '',
                    'categoryName': '',
                    'closingDate': '',
                    'style': '风格不限',
                    'specifications': '规格不限',
                    'format': '',
                    'color': 'RGB',
                    'feedbackInterval': '不需要定期反馈',
                },
                categories: [{categoryName: ''}],
                rules: {
                    demands: [
                        {required: true, message: '请输入需求标题', trigger: 'blur'},
                        {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
                    ],
                    categoryName: {required: true, message: '请选择分类', trigger: 'change'},
                    requirements: {required: true, message: '请输入详细要求', trigger: 'blur'},
                    feedbackInterval: {required: true, message: '请输入反馈间隔', trigger: 'blur'}
                },
                radio: '0',
                options:[],
            }
        },
        methods: {
            onSubmit() {
                this.form.username = localStorage.username;
                this.form.format = this.form.format.join('、');
                addDemands(this.form).then((res) => {
                    if (res.code === 200) {
                        this.$message.success(res.message);
                        this.$router.replace('/myDemands');
                    } else {
                        this.$message.error(res.message);
                        return false;
                    }
                });
            },
            selectCategory(){
                selectSecondLevelCategory(this.data).then((res)=>{
                    this.categories = res.data;
                })
            },
            getFormats(){
                let data = {};
                data.type = parseInt(this.radio);
                selectFormatByType(data).then(res=>{
                    if (res.code === 200){
                        this.options = res.data;
                    }
                })
            }
        },
        components: {
            HeaderNav
        },
        created() {
            this.getFormats();
            this.selectCategory();
        }
    }
</script>

<style>
    .img-div {
        width: 1000px;
        position: relative;
        display: flex;
        margin: 60px auto 0 auto;
    }
    .process-img {
        width: 55%;
        height: 80%;
        margin-top: 30px;
        margin-left: 100px;
    }
    .logo-img {
        float: left;
        z-index: 9;
        padding-top: 28px;
        width: 280px;
        height: 90px;
        line-height: 64px;
        position: relative;
    }
    container {
        width: 1000px;
        margin: 0 auto;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }



    .form-one {
        margin-top: 50px;
    }

    .form-two {
        margin-top: 209px;
    }

    .form-div {
        margin-top: 50px;
        margin-right: 100px;
    }


</style>
